<template>
    <div class="main">
        <div class="list-item">
            <!-- <div class="label"> -->
                <Label label="数字人视频数" :num="userInfo?.avatarVideoCnt" :img="ic_line"  :isShowImg="true" :height="54"></Label>
                <Label label="数字人直播数" :num="userInfo?.avatarLiveCnt" :img="ic_video" :imgWidth="56" :isShowImg="true" :height="54"></Label>
                <Label label="您的余额" :num="userInfo?.surplusMinutes" :img="ic_amount" :imgWidth="56" :isShowImg="true" :height="54"></Label>
                <Label label="到期时间" :num="userInfo?.expirationTime"  :isShowImg="false" :height="50"></Label>
            <!-- </div> -->
        </div>
    </div>

</template>

<script setup lang="ts">
import Label from './components/label.vue';
import {storeToRefs} from 'pinia'
import {useMainStore} from '@/store/main'
const ic_amount = new URL('@/assets/imgs/ic_amount.png', import.meta.url).href
const ic_video = new URL('@/assets/imgs/ic_video.png', import.meta.url).href
const ic_line = new URL('@/assets/imgs/ic_line.png', import.meta.url).href
const store = useMainStore();

const { userInfo } = storeToRefs(store)


</script>

<style scoped lang="css">
.main {
    color: #FFF;
    margin-left: 20px;
    margin-top: 10px;
    margin-right: 10px;
}
.list-item {
    height: 110px;
    width: 100%;
    border-radius: 10px;
    background: #25212B;
    color: #8D8F97;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: space-between;
}
/* .label {

} */
/* label {
    flex: 1;
} */
</style>